<template>
    <div class="basic-config">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="站点名称" prop="site_name">
                <el-input v-model="form.site_name" placeholder="请输入站点名称" style="width: 300px" />
            </el-form-item>
            
            <el-form-item label="站点描述" prop="site_description">
                <el-input v-model="form.site_description" type="textarea" :rows="3" 
                    placeholder="请输入站点描述" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="关键词" prop="keywords">
                <el-input v-model="form.keywords" placeholder="请输入关键词，多个用逗号分隔" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="备案号" prop="icp_number">
                <el-input v-model="form.icp_number" placeholder="请输入ICP备案号" style="width: 300px" />
            </el-form-item>
            
            <el-form-item label="客服电话" prop="customer_service_phone">
                <el-input v-model="form.customer_service_phone" placeholder="请输入客服电话" style="width: 200px" />
            </el-form-item>
            
            <el-form-item label="客服邮箱" prop="customer_service_email">
                <el-input v-model="form.customer_service_email" placeholder="请输入客服邮箱" style="width: 300px" />
            </el-form-item>
            
            <el-form-item label="用户注册" prop="user_registration">
                <el-radio-group v-model="form.user_registration">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="校友认证" prop="alumni_verification">
                <el-radio-group v-model="form.alumni_verification">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="handleSubmit" :loading="loading">保存配置</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const formRef = ref()

const form = reactive({
    site_name: '集大校友平台',
    site_description: '集美大学校友交流平台，连接校友情谊，共享发展机遇',
    keywords: '集美大学,校友平台,校友交流,校园社区',
    icp_number: '',
    customer_service_phone: '',
    customer_service_email: 'support@jmu.edu.cn',
    user_registration: 1,
    alumni_verification: 1
})

const rules = {
    site_name: [
        { required: true, message: '请输入站点名称', trigger: 'blur' }
    ],
    customer_service_email: [
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ]
}

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        loading.value = true
        
        // 模拟保存配置
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('配置保存成功')
    } catch (error) {
        if (error.errors) {
            ElMessage.error('请完善表单信息')
        } else {
            ElMessage.error('保存配置失败')
        }
    } finally {
        loading.value = false
    }
}

const handleReset = () => {
    Object.keys(form).forEach(key => {
        if (key === 'user_registration' || key === 'alumni_verification') {
            form[key] = 1
        } else {
            form[key] = ''
        }
    })
    form.site_name = '集大校友平台'
    form.site_description = '集美大学校友交流平台，连接校友情谊，共享发展机遇'
    form.keywords = '集美大学,校友平台,校友交流,校园社区'
    form.customer_service_email = 'support@jmu.edu.cn'
}
</script>

<style scoped>
.basic-config {
    padding: 20px;
}
</style>